<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



</head>

<body>
    <div id="app">
        <!-- <p>
            <input type="text" v-model="msg">
        <p>输入的内容是：{{msg}}</p>
        </p> -->
        <!-- <div>
            <textarea v-model="msg2"></textarea>
            <p>输入的内容是：{{msg2}}</p>
        </div>
        <div>
            <input type="text" :value="msg" @input="msg = $event.target.value">
            <p>输入的内容是：{{msg}}</p>
        </div>


        <div>
            <input type="radio" v-model="gender" name="sex" value="0">男
            <input type="radio" v-model="gender" name="sex" value="1">女
            <p>性别：{{gender}}</p>
        </div> -->


        <!-- <div>
            <input type="checkbox" v-model="hobby" value='1'>读书
            <input type="checkbox" v-model="hobby" value='2'>跑步
            <input type="checkbox" v-model="hobby" value='3'>游泳

            <p>爱好：{{hobby}}</p>
        </div> -->

        <div>
            <!-- <select v-model="city">
                <option disabled>请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
            </select>
            <p>城市：{{city}}</p> -->
        </div>

        <!-- <div>
            <select v-model="city" multiple>
                <option disabled>请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
            </select>
            <p>城市：{{city}}</p>
        </div> -->

        <div>
            <!-- .trim修饰符可以自动去除前后空格 -->
            <!-- <input type="text" v-model.trim="msg3"> -->

            <!-- .number修饰符可以将输入的字符串转为数字 -->
            <!-- <input type="text" v-model.number="msg3"> -->
            <!-- .lazy修饰符可以延迟更新，直到失去焦点 -->
            <input type="text" v-model.lazy="msg3">
            <p>输入的内容是：{{msg3}}</p>
        </div>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive, watch } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const msg = ref('hello')
                const msg2 = ref('你好')
                const gender = ref(0)
                const hobby = ref([])
                const city = ref('')
                const msg3 = ref('')

                watch(msg3, (newVal, oldVal) => {
                    console.log(newVal, oldVal);
                    console.log(typeof newVal, typeof oldVal);


                })
                return {
                    msg,
                    msg2,
                    gender,
                    hobby,
                    city,
                    msg3
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>